<template>
 <div class="label_container">
  <h3>标签管理</h3>
   <div class="search_button">
     <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="标签名称:" prop="name">
            <Input v-model="formValidate.name" placeholder="请输入标签名" style="width:300px;" clearable></Input>
            <Button type="success" icon="ios-search">搜索</Button>
        </FormItem>
     </Form>
   </div>
   <div class="footer">
     <div class="table">
       <Table border :columns="columns7" :data="data6"></Table>
     </div>
     <Row type="flex" justify="center" align="middle" style="margin-top:2vh;">
        <Col>
            <Page :id="pageId" show-total :total="total" :page-size="pageSize" @on-change="pageable" @on-page-size-change="changegroupPageSize" show-sizer show-elevator></Page>
        </Col>
        <Col push="1">
          <Button style="margin-top: 2vh;" type="primary" @click="goElevatorPage(pageId)">跳转</Button>
        </Col>
      </Row>
   </div> 
 </div>
</template>
<script>
export default {
  name: "LabelManage",
  data() {
    return {
      pageId:"targetPage",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      formValidate: {
        name: ""
      },
      ruleValidate: {
        name: [{ message: "标签名不能为空！", trigger: "blur" }]
      },
      columns7: [
        {
          title: "标签编号",
          key: "labelNum",
          align: "center",
          width: 150,
        },
        {
          title: "标签名称",
          key: "labelName",
          align: "center",
        },
        {
          title: "标签类型",
          key: "labelType",
          align: "center",
          width: 300,
        },
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small",
                    icon: "ios-create"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                    icon: "ios-trash-outline"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data6: [
        {
          labelNum: "1",
          labelName: "持卡",
          labelType: "会员基本属性"
        },
        {
          labelNum: "2",
          labelName: "会员",
          labelType: "会员基本属性"
        },
        {
          labelNum: "3",
          labelName: "关注妮维雅公众号",
          labelType: "会员基本属性"
        }
      ]
    };
  },
  methods:{
      show (index) {
        this.$Modal.info({
            title: 'User Info',
            content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
        })
      },
      remove (index) {
            this.data6.splice(index, 1);
      },
      // 切换分页
    pageable(current) {
        this.pageNum = current;
    },
    goElevatorPage(pageId){
      var evtObj;
      var thisPage=document.getElementById(pageId);
      var elevatorDiv=thisPage.getElementsByClassName("ivu-page-options-elevator");
      if(elevatorDiv && elevatorDiv.length>0){
        var pageInput = elevatorDiv[0].getElementsByTagName("input")[0];
        if (window.KeyEvent) {//firefox 浏览器下模拟事件
          evtObj = document.createEvent('KeyEvents');
          evtObj.initKeyEvent("keyup", true, true, window, true, false, false, false, 13, 0);
        } else {//chrome 浏览器下模拟事件
          evtObj = document.createEvent('UIEvents');
          evtObj.initUIEvent("keyup", true, true, window, 1);
          delete evtObj.keyCode;
          if (typeof evtObj.keyCode === "undefined") {//为了模拟keycode
            Object.defineProperty(evtObj, "keyCode", { value: 13 });
          } else {
            evtObj.key = String.fromCharCode(13);
          }
        }
        pageInput.dispatchEvent(evtObj);
      }
    },
  }
};
</script>
<style lang="scss" scoped>
@import "../../styles/common.scss";
.label_container {
  width: 100%;
  height: 100%;
  .footer {
    padding-bottom: 5vh;
    background-color: #fff;
    .table {
      margin-top: 2vh;
    }
    .page {
      display: flex;
      justify-content: center;
      margin-top: 2vh;
    }
  }
}
</style>
